<template>
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" :title="title" :sub-title="subTitle" @back="handleBack">
        <template #backIcon>
            <DoubleLeftOutlined />
        </template>
        <template #extra>
            自定义操作区
        </template>
    </a-page-header>
    <div class="main">
        <div class="content" v-for="oilPipe in oilPipes">
            <m-card :oilPipe="oilPipe || {}"></m-card>
            <!-- <m-card v-bind="option?.cardProps || {}"></m-card> -->
        </div>
    </div>
</template>
<script setup lang="ts">
import { DoubleLeftOutlined } from '@ant-design/icons-vue';
import { PropType,ref, reactive, onMounted, useSlots } from 'vue';
import { EdgeGateways } from '/@/api/device/monitor'
import { CardType } from '/@/components/Card/types';
const title = ref(String);
const subTitle = ref(String);
const oilPipes = ref([]);
const reqeustDeviceParams = reactive({
    curPageNum: 1,
    numPerPage: 10,

    parameter: {
        orgID: null,
        onlyThis: true,
        edgeHardwareTypeId: 1,
        hostDeviceTypeId: 1
    }
})
const slots = useSlots();
const props = defineProps({
    option: {
        type: Object as PropType<CardType>
    },
    searchModel: {
        type: Object
    }
})
// const cardProps = () => {
//     const res: Array<{ slotName: String, templateName: any }> = []
//     return res;
// };
const handleBack = (e: Event) => {
    console.log(e)
}
onMounted(() => {
    let res = EdgeGateways(reqeustDeviceParams).then(result => {
        result.content?.data.forEach((item: any, index: any) => {
            title.value = item.name
            oilPipes.value = item.oilPipes
            subTitle.value = item.deviceTpye.name

        });

        // title.value = result.content?.data.name;
        return result.content?.data
        //   console.log('result',result.content?.data); // 输出: 操作成功
    }).catch(error => {
        console.error(error);
    });
    console.log('res----', res);


})
</script>
<style lang="less" scoped>
.main {

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;

    .content {
    //    margin: 150px;
    flex: 1;
    // background-color: lightcoral;
    overflow-y: auto; /* 如果子元素内容超出，可以滚动查看 */
    display: flex;
    justify-content: center;
    align-items: center;
    }
}
</style>